<template>
	<view class="reg">
    
		<m-nav :navStyle="navStyle" mainColor="#fff">
		  <block slot="content">Who am I</block>
		</m-nav>
    
    <view class="reg-body">
    
      <view class="reg-inline">
        <view class="reg-title"> I am a...</view>
        <view class="reg-content"> 
          <view class="reg-gender" :class="myGender=='Woman' ? 'reg-action' :''" @tap="selectMyGender('Woman')"> Woman </view>
          <view class="reg-or"> OR </view>
          <view class="reg-gender" :class="myGender=='Man' ? 'reg-action' :''" @tap="selectMyGender('Man')"> Man </view> 
        </view>
      </view>
       
      <view class="reg-inline">
        <view class="reg-title"> And </view>
        <view class="reg-content"> 
          <view class="reg-orientation" :class="orientation=='Straight' ? 'reg-action' :''" @tap="selectOrientation('Straight')"> Straight </view>
          <view class="reg-orientation" :class="orientation=='Couple' ? 'reg-action' :''" @tap="selectOrientation('Couple')"> Couple </view>
          <view class="reg-orientation" :class="orientation=='Bisexual' ? 'reg-action' :''" @tap="selectOrientation('Bisexual')"> Bisexual </view> 
        </view>
      </view>

      <view class="reg-inline">
        <view class="reg-title"> Look for match age？</view>
        <view class="reg-content"> 
          <view class="reg-age"> 
            <picker @change="startAgePickerChange" :value="startAgeIndex" :range="startArr">
              <view class="uni-input">{{startArr[startAgeIndex]}}</view>
            </picker>
          </view>
          <view class="reg-or"> To </view>
          <view class="reg-age">  
            <picker @change="endAgePickerChange" :value="endAgeIndex" :range="endArr">
              <view class="uni-input">{{endArr[endAgeIndex]}}</view>
            </picker>
          </view> 
        </view>
      </view>
      
      <view class="reg-inline reg-line-next">
        <view class="reg-next" @tap="next()">Continue</view>
      </view>
    </view>
    
	</view>
</template>

<script>
  import mNav from '@/components/m-nav/m-nav.vue';
	export default {
		data() {
			return {
				navStyle:[{background:'transparent'},{color:'#fff'}],
        myGender:'',
        orientation:'',
        startArr:[],
        endArr:[],
        startAgeIndex:0,
        endAgeIndex:32//81
			};
		},
    components: {
      mNav
    },
    
    onLoad() {
      for(let i=18;i<100;i++) {
        this.startArr.push(i);
        this.endArr.push(i);
      }
    },
    
    methods: {
      selectMyGender(type) {
        this.myGender = type;
      },
        
      selectOrientation(type) {
        this.orientation = type;
      },
      startAgePickerChange(e) {
        this.startAgeIndex = e.detail.value;
        this.getAgeList();
      },
      endAgePickerChange(e) {
        this.endAgeIndex = e.detail.value;
        this.getAgeList();
      },
      getAgeList() {
        let temp;
        if (this.startAgeIndex > this.endAgeIndex) {
           temp = this.endAgeIndex; 
           this.endAgeIndex = this.startAgeIndex;
           this.startAgeIndex = temp;
        }
      },
      next() {
        uni.navigateTo({
          url: '/pages/reg/reg-two'
        });
      }
    }
	}
</script>

<style>
  
page {
  background:linear-gradient(#F38E48 0%, #E82C6D 100%);
}

.reg {
  color:#fff;
}

.reg .reg-body {
  padding:80rpx 40rpx 80rpx 40rpx;
}

.reg .reg-inline {
  margin:20px 0;
}

.reg .reg-title {
  font-size:32rpx;
  margin-bottom:40rpx;
  margin-top:40rpx;
}

.reg .reg-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.reg .reg-gender {
  width:130px;
  height:50px;
  border-radius: 25px;
  background: #fff;
  color:#FD2A2A;
  line-height:50px;
  text-align: center;
  font-size:14px;
  box-shadow: 1px 1px 5px 1px #ee605a;
}

.reg .reg-or {
  font-size:24rpx;
  margin:0 20px;
}

.reg .reg-orientation {
  width:140rpx;
  height:140rpx;
  border-radius:100%;
  background: #fff;
  color:#FD2A2A;
  line-height:140rpx;
  text-align: center;
  font-size:28rpx;
  box-shadow: 1px 1px 5px 1px #ee605a;
  margin:0 40rpx;
}
.reg .reg-action {
  background:linear-gradient(90deg,#F38E48 0%, #E82C6D 100%);
  color:#fff;
}

.reg .reg-age {
  background: #fff;
  width:120px;
  height:50px;
  line-height:50px;
  border-radius:30px;
  color:#FD2A2A;
  text-align: center;
}

.reg .reg-line-next {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:200rpx;
}

.reg .reg-next {
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid #fff;
  border-radius: 60rpx;
  width:600rpx;
  height:100rpx;
  line-height:200rpx;
  text-align: center;
}

</style>
